import {ChangeDetectorRef, Component, ViewChild} from '@angular/core';
import {Platform, NavController, Config, Content} from 'ionic-angular';
import {ProductDetailPage} from '../product-detail/product-detail';
import {Helper} from "../../common/Helper";
import {ThemeableBrowser, ThemeableBrowserObject, ThemeableBrowserOptions} from "@ionic-native/themeable-browser";
// import {InAppBrowser} from "@ionic-native/in-app-browser";
// import {PayPage} from '../pay/pay';
// import {RegisterPage} from '../register/register';
import {IframePage} from '../iframe/iframe';
import {HomeProvider} from "../../providers/home/home";
import {HttpProvider} from "../../common/http";

// import Vibrant from 'node-vibrant'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild(Content) content: Content

  productList: object[]
  productDetailPage: any
  iframePage: any
  showTitle: boolean = false

  na:any =''

  constructor(public navCtrl: NavController,
              public platform: Platform,
              public config: Config,
              private http: HttpProvider,
              private helper: Helper,
              private homeProvider: HomeProvider,
              private themeableBrowser: ThemeableBrowser,
              // private iab: InAppBrower,
              private cdRef: ChangeDetectorRef) {
    this.na = navigator.appVersion
    this.iframePage = IframePage;
    this.productDetailPage = ProductDetailPage;
    this.helper.checkLogin(()=>{
      this.http.refreshToken()
    })
    this.getBanner()
  }

  contentScroll() {
    let top = this.content.scrollTop
    if (top > 300) return
    if (top >= 180) {
      Helper.setStatusBarDefault()
      this.showTitle = true
    } else {
      Helper.setStatusBarTranslucence()
      this.showTitle = false
    }
    //从该组件到各个子组件执行一次变化检测
    this.cdRef.detectChanges()
  }

  ionViewWillEnter() {
    this.getProductList()
    this.content.scrollTop >= 190 ? Helper.setStatusBarDefault() : Helper.setStatusBarTranslucence()
  }

  ionViewDidEnter(){
    // let test = this.test.nativeElement
    // Vibrant.from(test.querySelector('img').getAttribute('src')).getPalette().then(data=>{
    //   let v = data.Vibrant
    //   test.style.backgroundColor = `rgb(${v.r},${v.g},${v.b})`
    // })
  }

  getProductList(){
    this.homeProvider.getIndexInfo().then((data)=>{
      this.productList = data.list
    })
  }

  getBanner(){
    this.homeProvider.getBanner().then(data=>{
      console.log(data)
    })
  }

  openIframe() {
    this.navCtrl.push(IframePage, {
      // url: 'http://192.168.1.132:8101/'
      url: 'http://www.baidu.com/'
    })
  }

  openIframe2() {
    this.navCtrl.push(IframePage, {
      url: 'http://www.baidu.com/'
    })
  }

  gotoPage(url, target) {
    // const browser = this.iab.create('http://www.baidu.com/','_self',{
    //   location: 'yes',
    //   zoom: 'no',
    //   hardwareback: 'yes',
    //   toolbar: 'no',
    //   transitionstyle: 'crossdissolve'
    // });

    const options: ThemeableBrowserOptions = {
      statusbar: {
        color: '#ffffffff'
      },
      toolbar: {
        height: 44,
        color: '#ffffff'
      },
      title: {
        color: '#000000ff',
        showPageTitle: true
      },
      backButton: {
        wwwImage: 'assets/browserImage/back.png',
        wwwImagePressed: 'assets/browserImage/back.png',
        align: 'left',
        event: 'backPressed'
      },
      // forwardButton: {
      //   image: 'forward',
      //   imagePressed: 'forward',
      //   align: 'left',
      //   event: 'forwardPressed'
      // },
      closeButton: {
        image: 'close',
        imagePressed: 'close',
        align: 'left',
        event: 'closePressed'
      },
      customButtons: [
        {
          image: 'share_long',
          imagePressed: 'share_long',
          align: 'right',
          event: 'sharePressed'
        }
      ],
      // menu: {
      //   image: 'menu1',
      //   imagePressed: 'menu1_pressed',
      //   title: 'Test',
      //   cancel: 'Cancel',
      //   align: 'right',
      //   items: [
      //     {
      //       event: 'helloPressed',
      //       label: 'Hello World!'
      //     },
      //     {
      //       event: 'testPressed',
      //       label: 'Test!'
      //     }
      //   ]
      // },
      backButtonCanClose: true
    };
    // 这里调用多浏览器是系统浏览器
    const browser: ThemeableBrowserObject = this.themeableBrowser.create(url, target, options);
    // const browser: ThemeableBrowserObject= this.themeableBrowser.create(url, target, options);

    browser.on('sharePressed').subscribe(() => {
      console.log('分享')
    })

  }

  gotoApp(url, target) {
    // const browser = this.iab.create(url, target);
  }

}
